<template>
	<div class="app-container">
		<el-row :gutter="20">
			<!--部门数据-->
			<el-col :span="4" :xs="24" style="">
				<el-card shadow="hover">
					<el-input id="deptName" v-model="deptName" clearable placeholder="请输入部门名称"
							  prefix-icon="search" />
					<el-tree
						ref="deptTreeRef"
						:data="deptOptions"
						:expand-on-click-node="false"
						:filter-node-method="filterNode"
						:props="defaultProps"
						class="mt-2"
						default-expand-all
						@node-click="handleNodeClick"
					/>

				</el-card>
			</el-col>
			<!--用户数据-->
			<el-col :span="20" :xs="24">
				<transition name="fade">
					<div class="mb">
						<el-card shadow="hover">
							<el-form
								v-show="showSearch"
								ref="queryFormRef"
								:inline="true"
								:model="queryParams"
								label-width="70px"
							>
								<el-form-item label="用户名称" prop="userName">
									<el-input
										v-model="queryParams.userName"
										clearable
										placeholder="请输入用户名称"
										style="width: 200px"
										@keyup.enter.native="handleQuery"
									/>
								</el-form-item>
								<el-form-item label="手机号码" prop="phonenumber">
									<el-input
										v-model="queryParams.phonenumber"
										clearable
										placeholder="请输入手机号码"
										style="width: 200px"
										@keyup.enter.native="handleQuery"
									/>
								</el-form-item>
								<el-form-item label="状态" prop="status">
									<el-select
										v-model="queryParams.status"
										clearable
										placeholder="请选择状态"
										style="width: 200px"
										@change="handleQuery"
									>
										<el-option
											v-for="dict in sys_normal_disable"
											:key="dict.value"
											:label="dict.label"
											:value="dict.value"
										/>
									</el-select>
								</el-form-item>
								<el-form-item
									label="创建时间"
									style="font-weight: bold"
								>
									<el-date-picker
										v-model="dateRange"
										end-placeholder="结束日期"
										format="YYYY-MM-DD"
										range-separator="-"
										start-placeholder="开始日期"
										style="width: 240px"
										type="daterange"
										value-format="YYYY-MM-DD"
									></el-date-picker>
								</el-form-item>
								<form-search
									@reset="resetQuery"
									@search="handleQuery"
								/>
							</el-form>
						</el-card>
					</div>
				</transition>

				<el-card shadow="hover">
					<template #header>
						<el-row :gutter="10" class="mb8">
							<el-col :span="1.5">
								<el-button
									v-hasPermi="['system:user:add']"
									icon="plus"
									plain
									size="small"
									type="primary"
									@click="handleAdd"
								>新增
								</el-button
								>
							</el-col>
							<el-col :span="1.5">
								<el-button
									v-hasPermi="['system:user:import']"
									icon="upload"
									plain
									size="small"
									type="info"
									@click="handleImport"
								>导入
								</el-button
								>
							</el-col>
							<el-col :span="1.5">
								<el-button
									v-hasPermi="['system:user:export']"
									icon="download"
									plain
									size="small"
									type="warning"
									@click="handleExport"
								>导出
								</el-button
								>
							</el-col>
							<el-col v-if="!single" :span="1.5">
								<el-button
									v-hasPermi="['system:user:edit']"
									:disabled="single"
									icon="edit"
									plain
									size="small"
									type="success"
									@click="handleUpdate"
								>修改
								</el-button
								>
							</el-col>
							<el-col v-if="!multiple" :span="1.5">
								<el-button
									v-hasPermi="['system:user:remove']"
									:disabled="multiple"
									icon="delete"
									plain
									size="small"
									type="danger"
									@click="handleDelete"
								>删除
								</el-button
								>
							</el-col>
							<!-- prettier-ignore -->
							<right-toolbar v-model:showSearch="showSearch" @queryTable="getPageList" />
						</el-row>
					</template>
					<el-table
						ref="pageTableRef"
						v-loading="loading"
						:data="userList"
						border
						stripe
						@selection-change="handleSelectionChange"
					>
						<el-table-column
							:selectable="checkSelected"
							align="center"
							type="selection"
							width="50"
						/>
						<el-table-column
							v-if="columns[1].visible"
							key="userName"
							:show-overflow-tooltip="true"
							align="center"
							label="用户名称"
							prop="userName"
							width="150"
						/>
						<el-table-column
							v-if="columns[2].visible"
							key="nickName"
							:show-overflow-tooltip="true"
							align="center"
							label="用户昵称"
							prop="nickName"
							width="150"
						/>
						<el-table-column
							v-if="columns[3].visible"
							key="deptName"
							:show-overflow-tooltip="true"
							align="center"
							label="部门"
							prop="dept.deptName"
						/>
						<el-table-column
							v-if="columns[4].visible"
							key="phonenumber"
							align="center"
							label="手机号码"
							prop="phonenumber"
							width="120"
						/>
						<el-table-column
							v-if="columns[5].visible"
							key="status"
							align="center"
							label="状态"
							width="100"
						>
							<template #default="scope">
								<!-- prettier-ignore -->
								<status-switch
									:activeColor.sync="'#00CD00'.toString()"
									:disabled="scope.row.admin"
									:inactiveColor.sync="'#CDBA96'.toString()"
									:status-data.sync="scope.row.status"
									@handleChange="handleStatusChange($event, scope.row)"
								/>
								<!-- <el-switch
									v-model="scope.row.status"
									class="mb-2"
									:active-value="0"
									:inactive-value="1"
									style="--el-switch-on-color: #00CD00; --el-switch-off-color: #CDBA96"
									@change="handleStatusChange($event, scope.row)"
								/> -->
								<!-- <el-select
									v-model="scope.row.status"
									@change="handleStatusChange($event, scope.row)"
								>
									<el-option label="启用" value="0"></el-option>
									<el-option label="停用" value="1"></el-option>
								</el-select> -->
							</template>
						</el-table-column>
						<el-table-column
							v-if="columns[6].visible"
							align="center"
							label="创建时间"
							prop="createTime"
							width="160"
						>
							<template #default="scope">
								<span>{{ parseTime(scope.row.createTime) }}</span>
							</template>
						</el-table-column>
						<el-table-column
							align="center"
							class-name="small-padding fixed-width"
							label="操作"
							width="200"
						>
							<template #default="scope">
								<!-- prettier-ignore -->
								<el-link
									v-hasPermi="['system:user:edit']"
									:disabled="scope.row.admin"
									:underline="false"
									class="table_link_btn"
									icon="Edit"
									size="small"
									type="primary"
									@click="handleUpdate(scope.row)"
								>
									<span class="table_link_text">修改</span>
								</el-link>
								<!-- prettier-ignore -->
								<el-link
									v-hasPermi="['system:user:resetPwd']"
									:underline="false"
									class="table_link_btn"
									icon="Refresh"
									size="small"
									type="primary"
									@click="handleResetPwd(scope.row)"
								>
									<span class="table_link_text">重置</span>
								</el-link>
								<!-- prettier-ignore -->
								<el-link
									v-hasPermi="['system:user:remove']"
									:disabled="scope.row.userId === '1'"
									:underline="false"
									class="table_link_btn"
									icon="Delete"
									size="small"
									type="danger"
									@click="handleDelete(scope.row)"
								><span class="table_link_text"
								>删除</span
								></el-link
								>
							</template>
						</el-table-column>
					</el-table>

					<pagination
						v-show="total > 0"
						v-model:limit="queryParams.pageSize"
						v-model:page="queryParams.pageNum"
						:total="total"
						@pagination="getPageList"
					/>
				</el-card>
			</el-col>
		</el-row>

		<!-- 添加或修改对话框 -->
		<el-dialog v-model="open" :title="title" append-to-body width="40%" @close="cleanSelect()">
			<!-- prettier-ignore -->
			<el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
				<el-row>
					<el-col :span="12">
						<el-form-item label="用户昵称" prop="nickName">
							<el-input
								v-model="form.nickName"
								placeholder="请输入用户昵称"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="归属部门" prop="deptId">
							<el-tree-select
								v-model="form.deptId"
								:data="deptOptions"
								:props="defaultProps"
								check-strictly
								placeholder="请选择归属部门"
								style="width: 100%;"
								value-key="id"
							/>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="手机号码" prop="phonenumber">
							<el-input
								v-model="form.phonenumber"
								maxlength="11"
								placeholder="请输入手机号码"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="用户邮箱" prop="email">
							<el-input
								v-model="form.email"
								maxlength="50"
								placeholder="请输入邮箱"
							/>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item
							v-if="form.userId == undefined"
							label="用户名称"
							prop="userName"
						>
							<el-input
								v-model="form.userName"
								placeholder="请输入用户名称"
							/>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item
							v-if="form.userId == undefined"
							label="用户密码"
							prop="password"
						>
							<el-input
								v-model="form.password"
								placeholder="请输入用户密码"
								show-password
								type="password"
							/>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="用户性别">
							<el-select v-model="form.sex" placeholder="请选择性别" style="width: 100%;">
								<el-option
									v-for="dict in sys_user_sex"
									:key="dict.value"
									:label="dict.label"
									:value="dict.value"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="用户状态">
							<el-radio-group v-model="form.status" style="width: 100%;" @change="statusChange">
								<el-radio
									v-for="dict in sys_normal_disable"
									:key="dict.label"
									:label="dict.value"
								>{{ dict.label }}
								</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12">
						<el-form-item label="用户岗位">
							<el-select
								v-model="form.postIds"
								multiple
								placeholder="请选择岗位"
								style="width: 100%;"
							>
								<el-option
									v-for="item in postOptions"
									:key="parseInt(item.postId)"
									:disabled="item.status == '1'"
									:label="item.postName"
									:value="parseInt(item.postId)"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="所属角色">
							<el-select
								v-model="form.roleIds"
								multiple
								placeholder="请选择角色"
								style="width: 100%;"
							>
								<el-option
									v-for="item in roleOptions"
									:key="parseInt(item.roleId)"
									:disabled="item.status == '1'"
									:label="item.roleName"
									:value="parseInt(item.roleId)"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="24">
						<el-form-item label="备注信息">
							<el-input
								v-model="form.remark"
								:autosize="{ minRows: 4, maxRows: 8 }"
								placeholder="请输入内容"
								type="textarea"
							></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button :loading="buttonLoading" type="primary" @click="submitForm"
					>确 定
					</el-button
					>
					<el-button @click="cancel">取 消</el-button>
				</div>
			</template>
		</el-dialog>

		<!-- 用户导入对话框 -->
		<el-dialog
			v-model="upload.open"
			:title="upload.title"
			append-to-body
			width="400px"
			@close="cleanUploadRef()"
		>
			<!-- prettier-ignore -->
			<el-upload
				ref="uploadRef"
				:action="upload.url + '?updateSupport=' + upload.updateSupport"
				:auto-upload="false"
				:disabled="upload.isUploading"
				:headers="upload.headers"
				:limit="1"
				:on-progress="handleFileUploadProgress"
				:on-success="handleFileSuccess"
				accept=".xlsx, .xls"
				drag
			>
				<i class="upload"></i>
				<div class="el-upload__text">
					将文件拖到此处，或
					<em>点击上传</em>
				</div>
				<div slot="tip" class="el-upload__tip">
					<!-- prettier-ignore -->
					<el-checkbox v-model="upload.updateSupport" />
					是否更新已经存在的用户数据
					<el-link
						style="font-size:12px"
						type="info"
						@click="importTemplate"
					>下载模板
					</el-link
					>
				</div>
				<!-- prettier-ignore -->
				<div slot="tip" class="el-upload__tip" style="color:red">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
			</el-upload>
			<template #footer>
				<div class="dialog-footer">
					<!-- prettier-ignore -->
					<el-button type="primary" @click="submitFileForm">确 定</el-button>
					<!-- prettier-ignore -->
					<el-button @click="upload.open = false">取 消</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" name="User" setup>
import User from "@/api/request/system/user";
// prettier-ignore
const {
	loading,
	buttonLoading,
	queryFormRef,
	formRef,
	sys_normal_disable,
	deptTreeRef,
	single,
	multiple,
	showSearch,
	total,
	userList,
	title,
	deptOptions,
	open,
	deptName,
	dateRange,
	sys_user_sex,
	postOptions,
	roleOptions,
	form,
	defaultProps,
	upload,
	queryParams,
	columns,
	rules,
	pageTableRef,
	uploadRef,
	getPageList,
	filterNode,
	handleNodeClick,
	handleStatusChange,
	cancel,
	handleQuery,
	resetQuery,
	handleSelectionChange,
	statusChange,
	handleAdd,
	handleUpdate,
	handleResetPwd,
	submitForm,
	handleDelete,
	handleExport,
	handleImport,
	importTemplate,
	handleFileUploadProgress,
	handleFileSuccess,
	submitFileForm,
	checkSelected,
	cleanSelect,
	cleanUploadRef,
} = User();
</script>
<style>
.post-tag {
	float: left;
	margin: 5px 0 0 5px;
}

.mb {
	margin-bottom: 10px;
}
</style>
